<template>
    <el-container>
        <el-main class="wrapper">
            <section class="panel cms-content" v-loading="loading"
                     element-loading-text="数据提交中..."
                     element-loading-spinner="el-icon-loading" style="min-height: 550px">
                <el-form :model="form" ref="form" label-width="120px">
                    <el-row :gutter="20" >
                        <el-col :span="12">
                            <header class="panel-heading">
                                基本设置
                            </header>
                            <div class="panel-body" style="margin-top: 10px">
                                <el-form-item label="网站LOGO：">
                                    <span style="color: #888">网站LOGO宽高建议尺寸是 224px*90px  !!!</span>
                                    <el-upload
                                            class="index-avatar-uploader"
                                            :action="upload"
                                            :headers="myHeaders"
                                            :show-file-list="false"
                                            name="image"
                                            :on-success="uploadPcLogoSuccess"
                                            :before-upload="uploadBefore">
                                        <img v-if="form.value.pc_logo" :src="form.value.pc_logo"
                                             class="index-avatar" style="width: 224px;height: 90px">
                                        <i v-else class="el-icon-plus index-avatar-uploader-icon" style="width: 224px;height: 90px;line-height: 90px;"></i>
                                    </el-upload>
                                </el-form-item>
                                <el-form-item label="移动LOGO：">
                                    <span style="color: #888">移动LOGO宽高建议尺寸是 115px*45px  !!!</span>
                                    <el-upload
                                            class="index-avatar-uploader"
                                            :action="upload"
                                            :headers="myHeaders"
                                            :show-file-list="false"
                                            name="image"
                                            :on-success="uploadWapLogoSuccess"
                                            :before-upload="uploadBefore">
                                        <img v-if="form.value.wap_logo" :src="form.value.wap_logo"
                                             class="index-avatar" style="width: 115px;height: 45px">
                                        <i v-else class="el-icon-plus index-avatar-uploader-icon" style="width: 115px;height: 45px;line-height: 45px;"></i>
                                    </el-upload>
                                </el-form-item>
                                <el-form-item label="关注二维码：">
                                    <span style="color: #888">二维码宽高建议尺寸是 150px*150px  !!!</span>
                                    <el-upload
                                            class="index-avatar-uploader"
                                            :action="upload"
                                            :headers="myHeaders"
                                            :show-file-list="false"
                                            name="image"
                                            :on-success="uploadQrCodeSuccess"
                                            :before-upload="uploadBefore">
                                        <img v-if="form.value.qr_code" :src="form.value.qr_code"
                                             class="index-avatar" style="width: 150px;height: 150px">
                                        <i v-else class="el-icon-plus index-avatar-uploader-icon" style="width: 150px;height: 150px;line-height: 150px;"></i>
                                    </el-upload>
                                </el-form-item>
                                <el-form-item label="默认用户头像：">
                                    <span style="color: #888">默认用户头像建议尺寸是 150px*150px  !!!</span>
                                    <el-upload
                                            class="index-avatar-uploader"
                                            :action="upload"
                                            :headers="myHeaders"
                                            :show-file-list="false"
                                            name="image"
                                            :on-success="uploadDefaultAvatarSuccess"
                                            :before-upload="uploadBefore">
                                        <img v-if="form.value.default_avatar" :src="form.value.default_avatar"
                                             class="index-avatar" style="width: 150px;height: 150px">
                                        <i v-else class="el-icon-plus index-avatar-uploader-icon" style="width: 150px;height: 150px;line-height: 150px;"></i>
                                    </el-upload>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <header class="panel-heading">
                                系统设置
                            </header>
                            <div class="panel-body" style="margin-top: 10px">
                                <el-form-item label="图片上传地址：">
                                    <el-input v-model="form.value.img_upload" placeholder="图片上传地址"></el-input>
                                </el-form-item>
                                <el-form-item label="文件上传地址：">
                                    <el-input v-model="form.value.file_upload" placeholder="文件上传地址"></el-input>
                                </el-form-item>
                            </div>
                            <header class="panel-heading">
                                底部相关
                            </header>
                            <div class="panel-body" style="margin-top: 10px">
                                <el-form-item label="统计代码：" >
                                    <el-input type="textarea" rows="5" v-model="form.value.code" placeholder="统计代码"></el-input>
                                </el-form-item>
                                <el-form-item label="声明：">
                                    <el-input v-model="form.value.statement" placeholder="声明"></el-input>
                                </el-form-item>
                                <el-form-item label="底部版权信息：">
                                    <el-input v-model="form.value.state" placeholder="底部版权信息"></el-input>
                                </el-form-item>
                                <el-form-item label="备案号：">
                                    <el-input v-model="form.value.record" placeholder="备案号"></el-input>
                                </el-form-item>
                                <el-form-item label="备案号超链接：">
                                    <el-input v-model="form.value.record_link" placeholder="备案号超链接"></el-input>
                                </el-form-item>
                                <div class="form-btn">
                                    <el-button style="margin-left: 100px" type="primary" @click="update()">提交保存</el-button>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
            </section>
        </el-main>
    </el-container>
</template>
<script>
    import {mapGetters} from 'vuex';
    import {ConfigUpdate,ConfigInfo} from '@/utils/request';
    export default {
        data() {
            return {
                form: {
                    id: 4,
                    key:'setting',
                    value: {
                        wap_logo:'',pc_logo:'',qr_code:'',default_avatar:'',record_link:'',record:'',code:'',statement:'',img_upload:'',file_upload:''
                    },
                },
                myHeaders: {
                    'Authorization': 'Bearer ' + this.$storage.get('token'),
                    'Accept': 'application/json'
                },
            }
        },
        activated() {
            this.config();
            this.form =  {
                    id: 4,
                    key:'setting',
                    value: {
                        wap_logo:'',pc_logo:'',qr_code:'',default_avatar:'',record_link:'',record:'',code:'',statement:'',img_upload:'',file_upload:''
                    },
                };
        },
        computed: {
            ...mapGetters(['loading', 'upload']),
        },
        methods: {
            //上传封面
            uploadPcLogoSuccess(res, file) {
                this.form.value.pc_logo = res.data.path;
            },
            uploadWapLogoSuccess(res, file) {
                this.form.value.wap_logo = res.data.path;
            },
            uploadQrCodeSuccess(res, file) {
                this.form.value.qr_code = res.data.path;
            },
            uploadDefaultAvatarSuccess(res, file) {
                this.form.value.default_avatar = res.data.path;
            },
            uploadBefore(file) {
                const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传封面图片只能是 JPG | PNG | GIF格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传封面图片大小不能超过 2M!');
                }
                return isJPG && isLt2M;
            },
            config() {
                this.$store.dispatch('setLoading', true);
                ConfigInfo({params:{key:'setting'}}).then((res) => {
                    if(res.code){
                        this.$message.error(res.msg);
                    }else{
                        if(res.data.value) this.form = res.data;
                    }
                    this.$store.dispatch('setLoading', false);
                });
            },
            //更新
            update() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.$store.dispatch('setLoading', true);
                        ConfigUpdate(this.form).then((response) => {
                            if (response.code) {
                                this.$message.error(response.msg);
                            } else {
                                this.$message({
                                    type: 'success',
                                    duration: '1000',
                                    message: response.msg,
                                    onClose: () => {
                                        this.config();
                                    }
                                });
                            }
                        });
                    }
                });

            },
        },
    }
</script>
